<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/jsp/static/jstl.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>star-上传</title>
<%-- <link rel="stylesheet" type="text/css" href="${Res_static }/css/main.css"> --%>
<%@include file="/WEB-INF/jsp/static/hxk_js.jsp" %>
<style type="text/css">
	.chooseImage,.sub{
		width: auto;
		height: auto;
		border: 1px solid rgba(200,200,200,.5);
		margin: 20px;
		box-shadow: 1px 1px 10px #CCC;
		padding: 5px;
		border-radius:5px;
	}
	.upload_container{
	    width: 100%;
    	margin: auto;
   	    height: auto;
    	overflow: hidden;
    	position: relative;
	}
	.upload_container *{ 
		user-select: none;
		cursor: pointer;
	}
	.upload_container > div{
		float: left;
		margin: .5rem;
	}
	.add_img{
		width: 100px;
		height: 100px;
		position: relative;
		border: 1px solid rgba(200,200,200,.3);
		text-align: center;
		line-height: 100px;
		font-size: 50px;
	}
	.show_img{
		width: 100px;
		height: 100px;
		position: relative;
		border: 1px solid rgba(200,200,200,.3);
	}
	.show_img img{
		height: 100%;
		width: 100%;
	}
	.show_img span{
		height: 20px;
		width: 20px;
		position: absolute;
		top: -5px;
		right: -5px;
		border-radius:100%;
		text-align: center;
		line-height: 20px;
		color: white;
		background: red;
	}
</style>
</head>
<body>
	<%@include file="/WEB-INF/jsp/static/hxk_nav.jsp" %>
	<h3 style="text-align: center;font-size: 20px;padding: 1rem;background: rgba(200,200,200,.5);">上传图片并预览</h3>
	<div class="upload_container">
		<div class="add_img">
			+
		</div>
	</div>
	<form class="file" action="/file/imgUpload.htm" method="post" enctype="multipart/form-data" style="display:none;">
		<input type="file" name="file" value=""/>
	</form>
</body>
<script type="text/javascript">
$(function(){
	$(".add_img").click(function(){
		$("input[type=file]").click();
	});
	$("input[type=file]").change(function(){
		valueChange();
	});
	var valueChange = function(){
		 var formData = new FormData($( ".file" )[0]);  
	     $.ajax({  
	          url: $(".path").val()+'/file/imgUpload.htm' ,  
	          type: 'POST',  
	          data: formData,  
	          async: false,  
	          cache: false,  
	          contentType: false,  
	          processData: false,  
	          success: function (data) {  
	              var Jdata = JSON.parse(data);
	              uploadSuccess(Jdata);
	          },  
	          error: function (returndata) {  
	        	  $liu.msg({msg:returndata});  
	          }  
	     });  
	},
	uploadSuccess = function(data){
		var div = $("<div class='show_img'><img ><span>-</span></div>");
		if(data.status == true){
      	  $(div).find("img").attr({"src":data.src});
      	  $(div).find("span").on("click",deleteImg);
      	  $(".add_img").before(div);
        	$liu.msg({msg:data.msg});
        }else{
        	$liu.msg({msg:data.msg});
        }
	},
	deleteImg = function(){
		var _this = this,
		name = "/"+$(_this).siblings("img").attr("src").split("/").reverse()[0],
		url = $(".path").val()+"/file/deleteImg.htm",
		data = {"name":name},
		successFun = function(data){
			if(data.status == true){
				$liu.msg({msg:data.msg});
				$("img[src$='"+data.name+"']").closest(".show_img").remove();
			}else{
				$liu.msg({msg:data.msg});
			}
		};
		$.post(url,data,function(data){
			var Jdata = JSON.parse(data);
			successFun(Jdata);
		});
	};
	
});
</script>
</html>